<template>
	<div class="ft-Box">
		<div class="ft-m">
			<div class="wrap ft-c">
				<div class="enter">
					<li class="unit ms-0">
						<a href="#" class="logo logo1"></a>
						<span class="tt">音乐开放平台</span>
					</li>
					<li class="unit">
						<a href="#" class="logo logo2"></a>
						<span class="tt">云村交易所</span>
					</li>
					<li class="unit">
						<a href="#" class="logo logo3"></a>
						<span class="tt">Amped Studio</span>
					</li>
					<li class="unit">
						<a href="#" class="logo logo4"></a>
						<span class="tt">X Studio虚拟歌手</span>
					</li>
					<li class="unit">
						<a href="#" class="logo logo5"></a>
						<span class="tt">用户认证</span>
					</li>
					<li class="unit">
						<a href="#" class="logo logo6"></a>
						<span class="tt">音乐交易平台</span>
					</li>
					<li class="unit">
						<a href="#" class="logo logo7"></a>
						<span class="tt">云推歌</span>
					</li>
					<li class="unit">
						<a href="#" class="logo logo8"></a>
						<span class="tt">赞赏</span>
					</li>
				</div>
				<div class="copy">
					<p class="link">
						<a href="#" class="link-item">服务条款</a><span class="line">|</span>
						<a href="#" class="link-item">隐私政策</a><span class="line">|</span>
						<a href="#" class="link-item">儿童隐私政策</a><span class="line">|</span>
						<a href="#" class="link-item">版权投诉</a><span class="line">|</span>
						<a href="#" class="link-item">投资者关系</a><span class="line">|</span>
						<a href="#" class="link-item">广告合作</a><span class="line">|</span>
						<a href="#" class="link-item">联系我们</a>
					</p>
					<p class="right">
						<a href="#" class="sep sepHover">廉正举报</a>
						<span class="sep span">不良信息举报邮箱: 51jubao@service.netease.com</span>
						<span class="span">客服热线：95163298</span>
					</p>
					<p class="right">
						<span class="span sep">互联网宗教信息服务许可证：浙（2022）0000120</span>
						<span class="span sep">增值电信业务经营许可证：浙B2-20150198</span>
						<a href="#" class="sepHover">粤B2-20090191-18  工业和信息化部备案管理系统网站</a>
					</p>
					<p class="right">
						<span class="sep span">网易公司版权所有©1997-2023</span>
						<span class="span">杭州乐读科技有限公司运营：</span>
						<a href="#" class="sepHover sep">浙网文[2021] 1186-054号</a>
						<a href="#" class="sepHover">
							<span class="police-logo"></span>
							<span class="police-text">浙公网安备 33010902002564号</span>
						</a>
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	
</script>

<style scoped>
	.logo{
		background: url('../assets/footer/foot_enter_new2.png') no-repeat;
		background-size: 220px 220px;
		display: block;
		width: 45px;
		height: 45px;
		margin: 0 auto;
	}
	ul,ol,li{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	p{
		margin: 0;
		padding: 0;
	}
	a{
		color: #666;
		font-size: 12px;
		text-decoration: none;
	}
	a:hover{
		color: #666;
	}
	.ft-Box{
		height: 325px;
		overflow: hidden;
		border-top: 1px solid #d3d3d3;
		background: #f2f2f2;
	}
	.wrap{
		width: 980px;
		margin: 0 auto;
	}
	.enter{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 33px;
	}
	.copy{
		padding-top: 60px;
		line-height: 24px;
		margin: 0 auto;
		text-align: center;
	}
	.unit{
		margin-left: 80px;
		width: 45px;
		text-align: center;
		color: #666;
	}
	.tt{
		display: inline-block;
		width: 100px;
		margin-top: 10px;
		margin-left: -27.5px;
		font-weight: 400;
		font-size: 12px;
		text-align: center;
		color: rgba(0,0,0, 0.5);
	}
	.logo1{
		background-position: -170px -5px;
	}
	.logo1:hover{
		background-position: -5px -115px;
	}
	.logo2{
		background-position: -5px -170px;
	}
	.logo2:hover{
		background-position: -60px -170px;
	}
	.logo3{
		background-position: -5px -60px;
	}
	.logo3:hover{
		background-position: -60px -5px;
	}
	.logo4{
		background: url('../assets/footer/xStudio.png') no-repeat;
		background-size: 45px;
	}
	.logo4:hover{
		background: url('../assets/footer/xStudioHover.png') no-repeat;
		background-size: 45px;
	}
	.logo5{
		background-position: -60px -60px;
	}
	.logo5:hover{
		background-position: -115px -5px;
	}
	.logo6{
		background-position: -115px -115px;
	}
	.logo6:hover{
		background-position: -5px -5px;
	}
	.logo7{
		background: url('../assets/footer/cloudSong.png') no-repeat;
		background-size: 45px;
	}
	.logo7:hover{
		background: url('../assets/footer/cloudSongHover.png') no-repeat;
		background-size: 45px;
	}
	.logo8{
		background-position: -170px -115px;
	}
	.logo8:hover{
		background-position: -60px -115px;
	}
	.link-item:hover,.sepHover:hover{
		text-decoration: underline;
	}
	.line{
		margin: 0 8px 0 8px;
		color: #D9D9D9;
	}
	.sep{
		margin-right: 14px;
	}
	.span{
		color: #666;
		font-size: 12px;
	}
	.police-logo{
		width: 14px;
		height: 14px;
		background: url('../assets/footer/police.png')no-repeat;
		background-size: cover;
		display: inline-block;
		margin-right: 2px;
		vertical-align: -2px;
	}
</style>